<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="../common.css" rel="stylesheet">
    <style>
        .div-cursor{ cursor:pointer; }
        #app .title{padding: 3rem;}
        #app img{width: 30%;height: 30%;}
        #app a{width: 2rem;height: 2rem;border-radius: 100%;border: 1px solid #555;}
        #app a.check{background-color: #29ae61;}
        #app input{width: 5.5rem;}
    </style>
</head>
<body>
<ul id="app" onselectstart="return false;">
    <li class="flex-wrap f24 border-bottom1 padding10 title font-w">
        <div class="box2 center">
            商品信息
        </div>
        <div class="box1 center">
            <span>
                 单价
            </span>
        </div>
        <div class="box1 center">
            <div>
                数量
            </div>
        </div>
        <div class="box1 center">
           小计
        </div>
        <div class="box1 center">
            编辑
        </div>
    </li>

    <li class="flex-wrap f14 border-bottom1 padding10" v-for="(it,index) in limitBy" :class="{'bggray':index == currentIndex}" @click="currentIndex = index">
        <div class="box2 center">
            <a href="javascript:;" class="dis-i" :class="{'check':it.checked}" @click="selectedProduct(it)"></a>
            <div class="dis-i padding10 flex-wrap">
                <img src="" :src="it.img" alt="">
                <div class="box1 flex-box paddingL10">
                    <h2 class="box1">{{it.name}}</h2>
                    <div class="dis-i">
                        <div class="f16 font-w">赠品</div>
                        <ol class="padding10 li16">
                            <li v-for="val in it.gift" :data-id="val.giftId" v-text="val.giftName"></li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
        <div class="box1 center">
            <span>
                 {{it.price | formatMoney}}
            </span>
        </div>
        <div class="box1 center">
            <div>
                <span class="padding10 dis-i bggray div-cursor" v-on:click="changeMoney(it,0)">-</span>
                <input type="text" value="" v-model="it.number" @input="calcTotalPrice()">
                <span class="dis-i padding10 bggray div-cursor" @click="changeMoney(it,1)">+</span>
            </div>
        </div>
        <div class="box1 center">
            <span>{{it.price*it.number | money(' 人民币')}}</span>
        </div>
        <div class="box1 center">
            <span class="dis-i padding10 c999" @click="delPrice(index)">删除</span>
        </div>
    </li>
    <li class="center padding10">
        <span class="dis-i padding10 bggreen cfff" @click="limit==3 ? limit=list.length : limit=3">展开/收起</span>
    </li>
    <li class="flex-wrap">
        <div class="box2 center">
            <span @click="checkAllFlag(true)" class="div-cursor">
                 <a href="javascript:;" class="dis-i" :class="{'check':checkAll}"></a>
                <span class="dis-i">全选</span>
            </span>

            <span class="dis-i padding10 cpurple div-cursor" @click="checkAllFlag(false)">取消全部</span>
        </div>
        <div class="box3"></div>
        <div class="box1"></div>
        <div class="box1">
            <span class="dis-i padding10">共计{{totalMoney | formatMoney}}</span>
        </div>
    </li>
</ul>
<script src="../vue2.0.js"></script>
<script src="../vue-resource.min.js"></script>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            list:[
                {
                    "check":true,
                    "img":"d1.png",
                    "name":"商品1111",
                    "id":1,
                    "gift":[
                        {
                            "giftName":"赠品1",
                            "giftId":1001
                        },
                        {
                            "giftName":"赠品2",
                            "giftId":1002
                        }
                    ],
                    "price":10.1000,
                    "number":4,
                    "subtotal":10.100
                },
                {
                    "check":true,
                    "img":"d1.png",
                    "name":"商品222",
                    "id":1,
                    "gift":[
                        {
                            "giftName":"赠品3",
                            "giftId":1001
                        },
                        {
                            "giftName":"赠品4",
                            "giftId":1002
                        }
                    ],
                    "price":10.1000,
                    "number":2,
                    "subtotal":10.100
                },
                {
                    "check":true,
                    "img":"d1.png",
                    "name":"商品3333",
                    "id":1,
                    "gift":[
                        {
                            "giftName":"赠品155",
                            "giftId":1001
                        },
                        {
                            "giftName":"赠品454",
                            "giftId":1002
                        }
                    ],
                    "price":10.1000,
                    "number":5,
                    "subtotal":10.100
                },
                {
                    "check":true,
                    "img":"d1.png",
                    "name":"商品42411",
                    "id":1,
                    "gift":[
                        {
                            "giftName":"赠品45242",
                            "giftId":1001
                        },
                        {
                            "giftName":"赠品4522",
                            "giftId":1002
                        }
                    ],
                    "price":10.1000,
                    "number":1,
                    "subtotal":10.100
                }
            ],
            checkAll:false,
            totalMoney:0,
            limit:3,
            currentIndex:0
        },
        //过滤器
        filters: {
            formatMoney: function (val) {
                return '￥ '+val.toFixed(2) +' 元'
            }
        },
        //read
        mounted: function () {
            //保证vue初始化完成
            this.$nextTick(function () {
                vm.cartView();
            });
        },
        //实时计算
        computed: {
            limitBy: function () {
                return this.list.slice(0,this.limit);
            }
        },
        methods:{
            cartView: function () {
                var $this = this;
                //es6 箭头函数
                this.$http.get('../cart.json').then(
//                        function(ret){
//                            $this.list = ret.body.list;
//                        }
                ret=>{
                    // get body data
                    this.list = ret.body.list;
                }
                );
            },
            //商品数量变化
            changeMoney: function (it,index) {
                if(index){
                    it.number++;
                } else {
                    it.number--;
                    if(it.number == 0) it.number = 1;
                }
                this.calcTotalPrice();
            },
            //单选
            selectedProduct: function (it) {
                if(typeof it.checked == 'undefined'){
                    Vue.set(it,'checked',true);
//                    this.$set(it,'checked',true);
                } else {
                    it.checked = !it.checked;
                }
                this.calcTotalPrice();
            },
            //全选、反选
            checkAllFlag: function (flag) {
                this.checkAll = flag;
                var $this = this;
                this.list.forEach(function (it, index) {
                    if(typeof it.checked == 'undefined'){
//                            Vue.set(it,'checked',$this.checkAll);
                        $this.$set(it,'checked',true);
                    } else {
                        it.checked = $this.checkAll;
                    }
                });
                this.calcTotalPrice();
            },
            //合计价格
            calcTotalPrice: function () {
                var $this = this;
                this.totalMoney = 0;
                this.list.forEach(function (it, index) {
                    if(it.checked){
                        $this.totalMoney += it.price*it.number;
                    }
                })
            },
            //删除商品
            delPrice: function (i) {
                this.list.splice(i,1);
            }
        }
    });

    //全局过滤器
    Vue.filter('money', function (val,type) {
        return '￥ '+val.toFixed(2) + type;
    })
</script>
</body>
</html>